<template>
	<view class="white-block">
		<view class="top-block">
			<view class="top-left-block">
				<input class="top-left-block-input" v-model="addLabel" type="text">
			</view>
			<view class="top-right-block" @click="add">
				添加
			</view>
		</view>
		<view class="bottom-blobk" :class="showMore?'show-more':''">
			<view class="label-item" :class="chosenLabels.includes(item.value)?'chosen':''" v-for="(item, index) in labelList" :key="item._id" @click="choose(item)">
				{{item.value}}
			</view>
			<view class="show-more-lebel" @click="showMore =!showMore">{{ showMore?'精简显示':'显示所有' }}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { getLabels } from '../../../api/bill';

	const emit = defineEmits(['change'])

	const showMore = ref(false);
	const addLabel = ref('')
	const labelList = ref([])
	const chosenLabels = ref([]);
	const getLabelList = async ()=>{
		const res = await getLabels()
		labelList.value = res
	}
	const isShow = index => {
		if(index < 4){
			return true
		} else {
			return showMore.value
		}
	}
	const add = () => {
		if(addLabel.value){
			labelList.value.push({
				_id: labelList.value.length + 1,
				value: addLabel.value
			})
			chosenLabels.value.push(addLabel.value);
			addLabel.value = '';
			emit('change', chosenLabels.value)
		}
	}
	const choose = item => {
		const hasItemIndex = chosenLabels.value.findIndex(item1 => item1 === item.value)
		if(hasItemIndex > -1){
			chosenLabels.value.splice(hasItemIndex, 1);
		} else {
			chosenLabels.value.push(item.value);
		}
		emit('change', chosenLabels.value)
	}
	getLabelList()
</script>
s
<style lang="less" scoped>
.white-block{
	flex-direction: column;
	align-items: baseline;
	.top-block{
		width: 100%;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		.top-left-block{
			flex: 1;
			height: 100%;
			background-color: #F5F6F7;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-content: center;
			.top-left-block-input{
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding-left: 20rpx;
			}
		}
		.top-right-block{
			width: 144rpx;
			height: 100%;
			text-align: center;
			line-height: 64rpx;
			color: #666666;
		}
	}
	.bottom-blobk{
		color: #666666;
		.label-item{
			display: none;
			line-height:48rpx;
			height: 48rpx;
			margin-top: 18rpx;
			margin-right: 8rpx;
			padding: 0 18rpx;
			border-radius: 8rpx;
			background-color: #F5F6F7;
			font-size: 24rpx;
			&.chosen{
				background-color: #6236FF;
				color: #FFFFFF;
			}
			&:nth-child(1){
				display: inline-block;
			}
			&:nth-child(2){
				display: inline-block;
			}
			&:nth-child(3){
				display: inline-block;
			}
			&:nth-child(4){
				display: inline-block;
			}
		}
		&.show-more{
			.label-item{
				display: inline-block;
			}
		}
		.show-more-lebel{
			display: inline-block;
			margin-top: 18rpx;
			text-align: center;
			line-height: 48rpx;
			height: 48rpx;
			padding: 0 18rpx;
			color: #6236FF;
			font-size: 24rpx;
		}
	}
}
</style>